<template>
	<view>
		<view class="indexBox" v-for="(item,key) in ReservationOrderList" :key="key">
			<view @click="toDetails(item,key)">
				<view class="artInfos">
					<view class="artHeadPic">
						<ZtHeadWear :width="80" :height="80" :borderWidth="4" :WxHeadPic="item.WxHeadPic"
							:userInfo="item" :UserLevelID="item.UserLevelID" image-width="30" image-height="20"
							size="16" right="-7" bottom="0" oneRight="0"></ZtHeadWear>
					</view>
					<view class="artInfo">
						<view style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;"
							v-if="item.UserSex">
							<view class="artName">{{item.NickName}}</view>
							<image src="/static/icon/girl.png" v-if="JSON.parse(item.UserSex).value == 0"
								style="width: 25rpx;height: 25rpx;margin-left: 10rpx;"></image>
							<image src="/static/icon/boy.png" v-if="JSON.parse(item.UserSex).value == 1"
								style="width: 25rpx;height: 25rpx;margin-left: 10rpx;"></image>

							<ztAuthLabel v-if="item.isAuthOk == 2" :size="18" height="30"></ztAuthLabel>
							<ZtPersonalityLabel v-if="item.BeautifulWomen == 1" :size="18" height="30">
							</ZtPersonalityLabel>
							<image :src="baseUrl + 'icon/enterprise.png'"
								style="width: 34rpx;height: 34rpx;margin-left: 10rpx;" v-if="item.isCompanyAuth == 2">
							</image>

						</view>
						<view class="artLabel">
							<view>
								<text v-for="(roleitem,roleindex) in item.PublicRoles" :key="roleindex">
									{{ roleitem.LabelName }}
									<text v-if="roleindex < item.PublicRoles.length-1">・</text>
								</text>
							</view>
							<view class="geline"> | </view>
							<view class="artAddr">{{ item.UserCity }}</view>
						</view>
					</view>
					<view class="artState">
						<view style="font-size:20rpx;" v-if="item.isOnline == 1">在线</view>
						<view style="font-size:20rpx;" v-if="item.isOnline == 0">
							{{ $common.timeDiff(item.onlineTime,new Date()) }}来过
						</view>
						<view style="font-size:20rpx;" v-if="item.isOnline == 2">
							今日活跃
						</view>
					</view>
				</view>


				<view class="flexbc" style="clear:both;margin-top:10rpx;padding-top:20rpx;">
					<view class="noticeTitle">
						<text>约 {{ item.ClassName }}</text>
						<text style="margin-left:0rpx">・</text>
						<text v-if="JSON.parse(item.PriceType).value === 1">
							<text>¥</text>
							<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
							<text v-else>{{ item.StartPrice|formatPrice }} ~ {{ item.EndPrice|formatPrice }}</text>
							<text>{{ JSON.parse(item.Unit).text}}</text>
						</text>
						<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
					</view>
					<view>
						<fui-icon name="location" :size="28"></fui-icon>
						<text class="onCity">{{ item.City?item.City:'全国' }}</text>
					</view>
				</view>
				<view class="flexbc">
					<view class="leftTexts">
						<view style="font-size:24rpx;color:#999;padding-top:10rpx;padding-bottom:10rpx;">
							{{item.ReservationOrderMemo}}
						</view>
					</view>
				</view>
			</view>
			<view class="artPics" v-if="JSON.parse(item.ReservationOrderPics).length > 0">
				<view class="artPicCount" v-if="JSON.parse(item.ReservationOrderPics).length > 3">
					{{ JSON.parse(item.ReservationOrderPics).length }}
				</view>
				<view class="artPic" v-for="(itm,idx) in JSON.parse(item.ReservationOrderPics)" :key="idx" v-if="idx<3"
					@click="showPhoto(JSON.parse(item.ReservationOrderPics), idx)">
					<!-- <image :src="itm" mode="aspectFill" style="width:200rpx;height:210rpx;border-radius: 10rpx;"></image> -->
					<view style="width:200rpx;height:210rpx;">
						<image :src="itm" mode="" style="height: 210rpx;border-radius: 10rpx;" lazy-load
							mode="aspectFill">
						</image>
						<!-- 						<zero-lazy-load borderRadius="10" height="210" :image="itm"
							imgMode='aspectFill'></zero-lazy-load> -->
					</view>
				</view>
			</view>
			<view style="height:auto" v-if="JSON.parse(item.ReservationOrderVideos).length > 0">
				<view v-for="(itm,idx) in JSON.parse(item.ReservationOrderVideos)" :key="idx">
					<video id="video" @play="play" @fullscreenchange="fullscreenchange" :src="itm"
						style="width:100%;height:370rpx" />
				</view>
			</view>
			<view class="indexBoxBottom flexbc">
				<view class="row-start">
					<view>{{ $common.timeDiff(item.addTime,new Date()) }}</view>
					<view class="getBaoming">
						<view style="float:left">
							<image src="/static/icon/mail.png" class="mailicon"></image>
						</view>
						<view style="float:left"><text>{{ item.BaomingCount }}</text></view>
					</view>
				</view>
				<view class="indexBoxCount flexbc">
					<view class="readcount">
						<view style="float:left">
							<image src="/static/icon/show.png" class="showicon"></image>
						</view>
						<view style="float:left"><text>{{ item.ReadCount }}</text></view>
					</view>
				</view>
			</view>
		</view>
		<fui-gallery :urls="photoUrls" :show="photoShow" @hide="hideGallery"></fui-gallery>
	</view>
</template>

<script>
	import ztAuthLabel from "@/components/authLabel.vue";
	import ZtPersonalityLabel from "@/components/personalityLabel.vue";
	import ZtHeadWear from "@/components/headwear.vue"
	export default {
		components: {
			ztAuthLabel,
			ZtPersonalityLabel,
			ZtHeadWear,
		},
		name: 'IndexReservationOrder',
		filters: {
			formatPrice(price) {
				if (price > 10000) {
					return price / 10000 + 'w';
				} else if (price > 1000) {
					return price / 1000 + 'k'
				} else {
					return parseInt(price, 10);
				}
			}
		},
		props: {
			ReservationOrderList: {
				type: [Object, Array],
				default: []
			}
		},
		data() {
			return {
				photoUrls: [],
				photoShow: false,
				baseUrl: ''
			}
		},
		mounted() {
			this.baseUrl = this.$baseUrl;
		},
		methods: {
			toDetails(item, index) {
				if (this.ReservationOrderList[index].isReadUsers == 0) {
					this.ReservationOrderList[index].isReadUsers = 1
					this.ReservationOrderList[index].ReadCount += 1
				}
				this.$common.goNavPage('/reservationorder/details?OrderID=' + item.ReservationOrderID)
			},
			showPhoto(photos, index) {
				// console.log(photos);
				// this.photoUrls = photos;
				// this.photoShow = true;

				uni.previewImage({
					current: index,
					urls: photos,
					showmenu: true,
				})
			},
			hideGallery() {
				this.photoShow = false;
			},
		},
	}
</script>

<style>
	.indexBox {
		margin: auto;
		margin-top: 20rpx;
		width: auto;
		height: auto;
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.onCity {
		color: #999;
		margin-left: 10rpx;
		padding-bottom: 5rpx;
		font-size: 24rpx
	}

	.readed {
		font-size: 22rpx;
		color: #999;
		background-color: #dddddd;
		position: absolute;
		border-radius: 10rpx 0 10rpx 0;
		top: 0;
		left: 0;
		padding: 6rpx 10rpx;
	}

	.noticeTitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.noticeMemo {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.artInfos {
		// display: flex;
		// justify-content: space-between;
		height: 80rpx;
	}

	.artHeadPic {
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		/* background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658'); */
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artInfo {
		float: left;
		width: 60vw;
		margin-left: 20rpx;
	}

	.artName {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 80%;
	}

	.artLabel {
		display: flex;
		font-size: 20rpx;
		color: #999
	}

	.artState {
		width: 120rpx;
		float: right;
		text-align: right;
		color: #999;
		font-size: 24rpx;
	}

	.artPics {
		clear: both;
		position: relative;
		display: flex;
		// justify-content: space-between;
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.artPic {
		width: 200rpx;
		height: 210rpx;

		margin: 10rpx
	}

	.artPic image {
		width: 100%;
		height: 210rpx;
	}

	.artPicCount {
		position: absolute;
		z-index: 50;
		bottom: 20rpx;
		right: 10rpx;
		width: 50rpx;
		height: 30rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFF;
		text-align: center;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.indexBoxBottom {
		clear: both;
		margin-top: 20rpx;
		padding-top: 20rpx;
		// padding-bottom:20rpx;
		border-top: 1rpx solid #f0f0f0;
		color: #CCC;
		font-size: 24rpx
	}

	.indexBoxCount {
		/* width:180rpx; */
		font-size: 24rpx
	}

	.mailicon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx
	}

	.showicon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.getBaoming {
		width: 120rpx;
		height: 30rpx;
		line-height: 30rpx;
		margin-left: 20rpx;
	}

	.readcount {
		width: 100rpx;
		height: 30rpx;
		line-height: 30rpx;
		display: inline;
	}

	.row-start {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
</style>